var React=require('react');
var CommentList=require('./CommentList');
var data=[
    {
        author:"fsadfs kkk",
        text:'im adfkj dkdkdk '
    },{
        author:"fdsfsd kkkk",
        text:'djdkjkdk kddkkdkdkdkdkdkkdkkd'
    }
];

var CommentBox = React.createClass({
    render:function(){
        return (
            <div className="commentBox">
                <h1>Comments</h1>
                <CommentList data={this.props.data}/>
                <CommentForm />
            </div>
        );
    }
});
var CommentList=React.createClass({
    render:function(){
        var commentNodes=this.props.data.map(function(comment){
           return (
               <Comment author={comment.author}>
               {comment.text}
               </Comment>
               ); 
        });
        return (
            <div className="commentList">
                {commentNodes}
            </div>
        )
    }
});

var CommentForm = React.createClass({
    render:function(){
        return (
            <div className="commentForm">
                Hello,world,Iam a CommentForm.
            </div>
        )
    }
});

React.render(
    <CommentBox  data={data}/>,
    document.getElementById('app')
);
